<template>
	<view class="container">
		<view class="yui-box">
			<view class="yui-box-card">
				<view class="yui-box-card-title">
					我的分红宝
				</view>
				<view class="yui-box-card-number">
					{{account.fhb}}
				</view>
			</view>
			<tabNav class="tabNav" :tabTitle="cateList" @changeTab="changeTab" :isUnderWidth="20"
				:style="{display: showSkeleton ? 'none' : 'block'}"></tabNav>
		</view>
		
		<view class="coupon-list">
		
			<view class="tui-coupon">
				<view class="coupon-items tui-top20" v-for="(item,index) in accoutList" :key="index">
					  <view class="coupon-items-left">
					  	<view class="coupon-top">
					  		<view class="coupon-top-title">{{item.type_name}}</view>
					  		<view class="coupon-top-time">{{item.create_time}}</view>
					  	</view>
					  	<view class="coupon-con">
					  		{{item.text}}
					  	</view>
					  	
					  </view>
					  <view class="coupon-items-right">
						  <view class="coupon-nums" :class="{'coupon-red':item.number>0}">
							  {{item.number}}
						  </view>
						  <view class="coupon-nums-sp">结算收益</view>
					  </view>
				</view>
			
			</view>
			<!--加载loadding-->
			<tui-loadmore v-if="loadding" :index="3" type="grey"></tui-loadmore>
			<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
			<view v-if="accoutList==''">
				<tui-no-data :fixed="false" imgUrl="/static/images/nodata/error.png">暂无数据</tui-no-data>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import tabNav from '@/components/tabNav.vue';
	export default {
		components: {
			tabNav,
		},
		data() {
			return {
				tabs: [{
					name: "已结算"
				}],
				currentTab: 0,
				pageIndex:1,
				loadding: false,
				balanceCount:'',
				pullUpOn: true,
				accoutList:'',
				scrollTop:0,
				account:"",
				bill_types:0,
				account_type:6,
				selectId:'',
				earnings:2,
				showSkeleton: true, //骨架屏显示隐藏
				cateList:[{
					"category_name":"收入",
					"category_id":"1"
				},
				{
					"category_name":"支出",
					"category_id":"2"
				}]
			}
		},
		onShow() {
			this.tui.haslogin();
			this.showSkeleton=false;
			if(this.tui.isLogin()){
				this.init();
			}
		},
		methods: {
			change(e) {
				this.currentTab = e.index;
				this.pageIndex=1;
				this.bill_types=e.index+1;
				
				// this.account_type=e.index==0?2:4;
				
				this.inits();
			},
			href() {
					uni.navigateTo({
						url: '../user/withdraw'
					})
			},
			changes() {
					uni.navigateTo({
						url: '../user/change'
					})
			},
			init() {
				    let token = this.tui.getToken();
		            let account=this.tui.request('user','post',{token: token},1000,1,'','userAccount');
		            Promise.resolve(account).then((value)=>{
		               if(value.code==200){
		               	this.account=value.data;
		               }else{
		               	this.tui.toast(value.message);
		               }
		            })
					this.inits();
					
			},
			changeTab(e) {
				
				this.selectId = e.pid
				this.pageIndex=1;
				this.earnings=e.index==0?2:1;
				this.inits();
				// this.getList();	
			},
			inits(){
				this.loadding = true
				let token = this.tui.getToken();
				let datas={
					token: token,
					account_type:this.account_type,
					limit:20,
					page:this.pageIndex,
					from_type:this.bill_types,
					earnings:this.earnings,
				};
				let accoutList=this.tui.request('user','post',datas,1000,1,'','bill');
				Promise.resolve(accoutList).then((value)=>{
				   if(value.code==200){
					    this.accoutList='';
						this.balanceCount=value.data.balanceCount
						if(value.data.data){
							this.accoutList=value.data.data;
						}
				   }else{
				   	this.tui.toast(value.message);
				   }
				    this.loadding=false;
				})
			},
		},
		
		
		onPullDownRefresh() {
			setTimeout(() => {
				this.pullUpOn = true
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom() {

			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
			let token = this.tui.getToken();
			this.pageIndex=this.pageIndex+1;
			let datas={
				token: token,
				account_type:this.account_type,
				limit:20,
				bill_types:this.bill_types,
				page:this.pageIndex,
				earnings:this.earnings,
			};
			
			let accoutList=this.tui.request('user','post',datas,1000,1,'','bill');
			Promise.resolve(accoutList).then((value)=>{
			   if(value.code==200){
				    if(value.data.data){
				    	this.accoutList=this.accoutList.concat(value.data.data);
				    }
			   }else{
			   	    this.tui.toast(value.message);
			   }
			})
		}
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}

	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	.yui-box{
		padding:32rpx;
/* 		width:100%; */
		background:#fff;
		box-shadow: 3rpx 6rpx 10rpx rgba(0, 0, 0, .04);
		/* background:url('/static/images/common/bpj.jpg'); */
	}
	.yui-box-card{
		background:url('/static/images/common/bpj.jpg');
		border-radius: 40rpx;
		color:#fff;
		padding:30rpx;
		height: 200rpx;
		background-size: 100%;
		box-shadow: 1rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	.yui-box-card-title{
		color:#fff;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
	}
	.yui-box-card-number{
		text-align: center;
		font-size: 56rpx;
		padding-top: 18rpx;
		color:#fff;
		font-weight: bold;
	}
	.yui-box-card-block{
		text-align: center;
		color:#fff;
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		font-size: 26rpx;
	}
	.yui-box-card-block-text{
		margin:0 20rpx;
		text-decoration:underline;
	}
	.tabNav{
		margin-top:20rpx;
		margin-bottom: -28rpx;
	}
    .tui-tabs-fixed{
		position:relative !important;
		top:auto !important;
	}
	.tui-coupon{
		width: 100%;
		/* margin-top: 60rpx; */
		position: relative;
		box-sizing: border-box;
	}
	.coupon-top{
		color:#666;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.coupon-top-title{
		text-align: left;padding-right: 20rpx;
		font-size: 26rpx;
	}
	.coupon-top-time{
		color:#b3b1b1;
		font-size: 22rpx;
	}
	.coupon-list {
	
		/* margin: 0 25rpx; */
		margin-top: 40rpx;
		position: relative;
		box-sizing: border-box;
		
	}
	.tui-coupon-list {
		width: 100%;
		padding: 0 25rpx;
		position: relative;
		box-sizing: border-box;
		
	}

	.tui-coupon-banner {
		width: 100%;
	}
    .coupon-con{
		background:#fff;
		font-size: 26rpx;
	}
	.coupon-nums{
		color:#828080;
		font-size: 30rpx;
	}
	.coupon-red{
		color:#e41f19
	}
	.coupon-grey{
		color:#acacac
	}
	.coupon-nums-sp{
		font-size: 24rpx;color:#b3b1b1;
		line-height: 40rpx;
	}
	.tui-coupon-item {
		border-radius: 6rpx;
		width: 100%;
	
		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background:#fff;
		overflow: hidden;
	}
	.coupon-items {
		border-radius: 10rpx;
		padding: 20rpx;
		width: 100%;
	
		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background:#fff;
		overflow: hidden;
	}
     .coupon-floar{
		 position: absolute;
		 right:0;
		 top:10rpx;
	 }
	 .coupon-floars{
	 		 position: absolute;
	 		 right:0;
	 		 top:70rpx;
	 }
	.tui-coupon-bg {
		width: 100%;
		height: 210rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.tui-coupon-sign {
		height: 110rpx;
		width: 110rpx;
		position: absolute;
		z-index: 9;
		top: -30rpx;
		right: 40rpx;
	}
    .coupon-items-left {
		color:#666;
		width: 70%;
		position: relative;
		z-index: 2;
		padding-left: 20rpx;
		display: flex;
	
		justify-content: flex-end;
		flex-direction: column;
		flex-shrink: 0;
	}
	.tui-coupon-item-left {
		width: 100%;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
	}

	.tui-coupon-price-box {
		display: flex;
		color: #e41f19;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 50rpx;
		line-height: 50rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}


	.tui-coupon-intro {
		background: #F7F7F7;
		padding: 8rpx 10rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: 400;
		color: #666;
		margin-top: 18rpx;
	}
    .coupon-items-right {
		flex: 1;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;
	}
	.tui-coupon-item-right {
		flex: 1;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.coupon-content {
		width: 82%;
		display: flex;
		font-size: 24rpx;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 6rpx;
		background: #FFEBEB;
		color: #e41f19;
		font-size: 25rpx;
		line-height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-color-grey {
		color: #888 !important;
	}

	.tui-bg-grey {
		background: #F0F0F0 !important;
		color: #888 !important;
	}

	.tui-coupon-title {
		width: 100%;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-coupon-rule {
		padding-top: 52rpx;
	}

	.tui-rule-box {
		display: flex;
		align-items: center;
		transform: scale(0.8);
		transform-origin: 0 100%;
	}

	.tui-padding-btm {
		padding-bottom: 6rpx;
	}

	.tui-coupon-circle {
		width: 8rpx;
		height: 8rpx;
		background: rgb(160, 160, 160);
		border-radius: 50%;
	}

	.tui-coupon-text {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #666;
		padding-left: 8rpx;
		white-space: nowrap;
	}

	.tui-top20 {
		margin-top: 20rpx;
	}

	.tui-coupon-title {
		font-size: 28rpx;
		line-height: 28rpx;
	}


	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-btn-box {
		position: absolute;
		width: 146rpx;
		height: 52rpx;
		right: 20rpx;
		bottom: 40rpx;
		z-index: 10;
	}

	/* #ifdef APP-PLUS || MP */
	.wx-radio-input {
		margin-right: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-radio .uni-radio-input {
		margin-right: 0 !important;
	}

	/* #endif */
</style>
